<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for 数据遍历</title>
    <script src="./js/vue.js"></script>
</head>
<!-- 在使用v-for的时候一定要注意加入key属性，否则会报warning -->
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <table border="1px" v-if="cart.length!=0">
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="p,index in cart" ::key="p.id">
                <td>{{p.id}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td>{{p.count}}</td>
                <td>{{p.price*p.count}}</td>
                <td><button @click="del(p.id)">删除</button></td>
            </tr>
        </table>
        <span v-if="cart.length==0">购物车中还未有商品，请购买商品</span>

        <ul>
            <li v-for="(ATM ,index) in list" :key="index">{{index}}--{{ATM}}</li>
        </ul>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'v-for 数据遍历',
            cart: [
                { id: '1', name: '苹果', price: '8', count: '2' },
                { id: '2', name: '橘子', price: '5', count: '1' },
                { id: '3', name: '阳光玫瑰', price: '20', count: '2' }
            ],
            list: [
                '奥特之王', '赛迦', '雷杰多', '诺亚'
            ]
        },
        methods: {
            // 删除
            del(id) {
                this.cart = this.cart.filter((item) => item.id != id)
            }
        }
    })

</script>